<template>
  <div>
    <div class="box">
      <span style="color: pink">说明：目前支持学科和关键字条件筛选</span>
      <el-button type="success" icon="el-icon-edit" @click.native="addQuestion"
        >新增试题</el-button
      >
    </div>
    <el-row>
      <el-form
        label-position="rigth"
        label-width="80px"
        size="small"
        :model="formDataAll"
      >
        <!-- 学科 -->
        <el-col :span="6">
          <el-form-item label="学科">
            <el-select
              v-model="formDataAll.subjectID"
              placeholder="请选择"
              width="100%"
              @change="changeSubjectName"
            >
              <el-option
                v-for="item in subjectList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <!-- 目录 -->
        <el-col :span="6">
          <el-form-item label="二级目录">
            <el-select
              v-model="formDataAll.catalogID"
              placeholder="请选择"
            >
              <el-option
                v-for="item in directorysList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <!-- 标签 -->
        <el-col :span="6">
          <el-form-item label="标签">
            <el-select v-model="formDataAll.tags" placeholder="请选择">
              <el-option
                v-for="item in tagsList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <!-- 关键字 -->
        <el-col :span="6">
          <el-form-item label="关键字">
            <el-input
              placeholder="根据题干搜索"
              style="width: 230px"
              v-model="formDataAll.keyword"
            />
          </el-form-item>
        </el-col>
        <!-- 试题类型 -->
        <el-col :span="6">
          <el-form-item label="试题类型">
            <el-select
              v-model="formDataAll.questionType"
              placeholder="请选择"
            >
              <el-option
                v-for="item in questionTypeList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <!-- 难度 -->
        <el-col :span="6">
          <el-form-item label="难度">
            <el-select
              v-model="formDataAll.difficulty"
              placeholder="请选择"
            >
              <el-option
                v-for="item in difficultyList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option> </el-select
          ></el-form-item>
        </el-col>
        <!-- 方向 -->
        <el-col :span="6">
          <el-form-item label="方向">
            <el-select
              v-model="formDataAll.direction"
              placeholder="请选择"
            >
              <el-option
                v-for="item in directionList"
                :key="item"
                :label="item"
                :value="item"
              >
              </el-option> </el-select
          ></el-form-item>
        </el-col>
        <!-- 录入人 -->
        <el-col :span="6">
          <el-form-item label="录入人">
            <el-select
              v-model="formDataAll.creatorID"
              placeholder="请选择"
            >
              <el-option
                v-for="item in UserSimple"
                :key="item.value"
                :label="item.username"
                :value="item.id"
              >
              </el-option> </el-select
          ></el-form-item>
        </el-col>
        <!-- 题目备注 -->
        <el-col :span="6">
          <el-form-item label="题目备注">
            <el-input placeholder="请输入题目备注" style="width: 230px" v-model="formDataAll.remarks" />
          </el-form-item>
        </el-col>
        <!-- 企业简称 -->
        <el-col :span="6">
          <el-form-item label="企业简称">
            <el-input placeholder="请输入企业简称" style="width: 230px" v-model="formDataAll.shortName" />
          </el-form-item>
        </el-col>
        <!-- 城市 -->
        <el-col :span="6">
          <el-form-item label="城市">
            <el-col :span="12">
              <el-select
                v-model="formDataAll.province"
                placeholder="请选择城市"
                @change="getCityList"
              >
                <el-option
                  v-for="item in provinceList"
                  :key="item"
                  :label="item"
                  :value="item"
                >
                </el-option>
              </el-select>
            </el-col>
            <el-col :span="12">
              <el-select
                v-model="formDataAll.city"
                placeholder="请选择地区"
              >
                <el-option
                  v-for="item in cityList"
                  :key="item"
                  :label="item"
                  :value="item"
                >
                </el-option>
              </el-select>
            </el-col>
          </el-form-item>
        </el-col>
        <!-- 按钮 -->
        <el-col :span="6">
          <el-form-item >
              <el-button @click.native="delSearchForm">清除</el-button>
              <el-button type="primary" @click.native="search(formDataAll)">搜索</el-button>
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>
  </div>
</template>

<script>
import {
  list as getQuestionListApi, // 获取基础题库列表
  choice as getChoiceQuestionListApi // 获取精选题库列表
} from '@/api/hmmm/questions'
import { simple as getSubjectSimpleListApi } from '@/api/hmmm/subjects' // 简单学科列表
import { simple as getdirectorysSimpleListApi } from '@/api/hmmm/directorys' // 目录简单列表
import { simple as getTagsSimpleListApi } from '@/api/hmmm/tags' // 标签简单列表
import { simple as getUserSimpleApi } from '@/api/base/users' // 录入人列表
import {
  provinces as getProvinces,
  citys as getCitys
} from '@/api/hmmm/citys.js'
import {
  difficulty, // 难度
  questionType, // 题型
  direction // 方向
} from '@/api/hmmm/constants'
export default {
  props: {
    question: null // 用于判断在那个组件中引用
  },
  data () {
    return {
      // form表单绑定的数据
      formDataAll: {
        shortName: null, // 企业简称
        remarks: null, // 题目备注
        city: null, // 选择的城市
        province: null, // 选择的省份
        direction: null, // 已选择的方向
        difficulty: null, // 已选择的难度
        questionType: null, // 已选择的题型
        creatorID: null, // 已选择的录入人
        subjectID: null, // 已选择的一级学科
        catalogID: null, // 已选择的目录
        tags: null, // 已选择标签
        keyword: null // 关键字
      },
      subjectList: [], // 学科简单列表
      directorysList: [], // 目录简单列表
      tagsList: [], // 标签简单列表
      questionTypeList: [], // 题型
      difficultyList: [], // 难度
      directionList: [], // 方向
      UserSimple: [], // 录入人列表
      provinceList: [], // 省份列表
      cityList: [] // 城市列表
    }
  },
  created () {
    // 获取学科简单列表
    this.getSubjectSimpleList()
    // 获取录入人列表
    this.getUserSimple()
    this.questionTypeList = questionType // 题型
    this.difficultyList = difficulty // 难度
    this.directionList = direction // 方向
    this.getProvinces() // 获取省份
  },
  methods: {
    // 搜索列表
    async search (formDataAll) {
      this.$emit('fn', formDataAll)
      if (!this.question) {
        const { data } = await getQuestionListApi(formDataAll)
        this.$emit('getNewTableData', data)
      } else {
        const { data } = await getChoiceQuestionListApi(formDataAll)
        this.$emit('getChoiceNewTableData', data)
      }
    },
    // 清空搜索
    async delSearchForm () {
      this.formDataAll = {
        cityValue: null, // 选择的城市
        provinceValue: null, // 选择的省份
        directionValue: null, // 已选择的方向
        difficultyValue: null, // 已选择的难度
        questionTypeValue: null, // 已选择的题型
        UserSimpleValue: null, // 已选择的录入人
        subjectID: null, // 已选择的一级学科
        directorysValue: null, // 已选择的目录
        tagsValue: null, // 已选择标签
        keyword: null // 关键字
      }
    },
    // 添加按钮
    addQuestion () {
      if (this.question) {
        this.$router.push('/questions/new?choiceState=0')
      } else {
        this.$router.push('/questions/new?choiceState=1')
      }
    },
    // 获取省份对应的市
    getCityList () {
      this.cityList = getCitys(this.formDataAll.provinceValue)
    },
    // 获取到省
    getProvinces () {
      this.provinceList = getProvinces()
    },
    // 获取录入人列表
    async getUserSimple () {
      const { data } = await getUserSimpleApi()
      this.UserSimple = data
    },
    // 获取学科简单列表
    async getSubjectSimpleList () {
      const { data } = await getSubjectSimpleListApi()
      this.subjectList = data
    },
    // 选择学科触发的事件
    async changeSubjectName () {
      // 获取目录简单列表
      this.getdirectorysSimpleList()
      // 获取标签简单列表
      this.getTagsSimpleList()
    },
    // 获取目录简单列表
    async getdirectorysSimpleList () {
      const { data } = await getdirectorysSimpleListApi({
        subjectID: this.subjectID
      }) // 获取目录简单列表
      this.directorysList = data
    },
    // 获取标签简单列表
    async getTagsSimpleList () {
      const { data } = await getTagsSimpleListApi({
        subjectID: this.subjectID
      })
      this.tagsList = data
    }
  }
}
</script>

<style scoped lang="scss">
.box {
  margin-bottom: 5px;
  display: flex;
  justify-content: space-between;
}
::v-deep {
  .el-select,
  .el-input {
    width: 100% !important;
  }
}
</style>
